import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

// 引入图标
import { Icon } from 'antd-mobile';

import "./cate.css"

import { actions, getCateGoods, getCateList } from "../../store/modules/cate";

import CateList from "./components/CateList";
import CateGoods from "./components/CateGoods";
class Cate extends Component {
    componentDidMount() {
        let { reqCateGoods, reqCateList } = this.props.cate
        reqCateList()
        reqCateGoods(1)
    }
    render() {
        let { cateGoods, cateList,cate:{reqCateGoods},history } = this.props
        return (
            <div className="cate">
                <h3>商品分类</h3>
                <div className="search">
                    <div className="searchBox">
                        <Icon type="search" />
                        <input type="text" placeholder="搜索内容" />
                        <span>搜索</span>
                    </div>
                </div>
                <div className="main">
                    <ul className="cateList">
                        <CateList cateList={cateList} reqCateGoods={reqCateGoods}></CateList>
                    </ul>
                    <div className="cateGoods">
                        <CateGoods cateGoods={cateGoods} history={history}></CateGoods>
                    </div>
                </div>
            </div>
        );
    }
}

//导入数据
let mapStateToProps = (state) => ({
    cateGoods: getCateGoods(state),
    cateList: getCateList(state),
});

//导入所有方法
let mapDispatchToProps = (dispatch) => ({ cate: bindActionCreators(actions, dispatch), });

//将数据和方法给this.props
export default connect(mapStateToProps, mapDispatchToProps)(Cate);